<template>
    <div class="text pl-m pr-m flex fd-column">
        <div class="flex fd-column f1 pb-s">
            <div class="bar pt-s flex ai-center">
                <div class="mr-s relative">
                    <i class="iconfont icon-smile" @click.stop="emoji = !emoji"></i>
                    <div class="flex emoji" v-show="emoji" @click.stop="addEmoji">
                        <div>
                            <i class="iconfont icon-smile" title="smile"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-angry" title="angry"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-dizzy" title="dizzy"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-flushed" title="flushed"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-frown" title="frown"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-frown-open" title="frown-open"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grimace" title="grimace"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin" title="grin"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-alt" title="grin-alt"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-beam" title="grin-beam"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-hearts" title="grin-hearts"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-beam-sweat" title="grin-beam-sweat"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-squint" title="grin-squint"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-squint-tears" title="grin-squint-tears"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-stars" title="grin-stars"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-tears" title="grin-tears"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-tongue" title="grin-tongue"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-tongue-squint" title="grin-tongue-squint"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-wink" title="grin-wink"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-grin-tongue-wink" title="grin-tongue-wink"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-kiss" title="kiss"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-kiss-beam" title="kiss-beam"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-kiss-wink-heart" title="kiss-wink-heart"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-laugh" title="laugh"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-laugh-beam" title="laugh-beam"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-laugh-squint" title="laugh-squint"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-laugh-wink" title="laugh-wink"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-meh" title="meh"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-meh-blank" title="meh-blank"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-meh-rolling-eyes" title="meh-rolling-eyes"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-sad-cry" title="sad-cry"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-sad-tear" title="sad-tear"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-smile-beam" title="smile-beam"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-smile-wink" title="smile-wink"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-surprise" title="surprise"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-tired" title="tired"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-lizard" title="hand-lizard"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-peace" title="hand-peace"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-point-down" title="hand-point-down"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-point-left" title="hand-point-left"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-point-right" title="hand-point-right"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-point-up" title="hand-point-up"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-rock" title="hand-rock"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-scissors" title="hand-scissors"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-hand-paper" title="hand-paper"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-handshake" title="handshake"></i>
                        </div>
                        <div>
                            <i class="iconfont icon-heart" title="heart"></i>
                        </div>
                    </div>
                </div>
                <div class="mr-s relative file">
                    <i class="iconfont icon-image"></i>
                    <input type="file" accept="image/*, video/*" class="fileUpload" @change="imgPost">
                </div>
                <div class="relative file">
                    <i class="iconfont icon-file"></i>
                    <input type="file" class="fileUpload" @change="filePost">
                </div>
            </div>
            <div class="sendBox f1 flex fd-column">
                <div class="f1">
                    <label>
                        <textarea ref="textInput" v-model="text" @keydown="checkKeyPost"></textarea>
                    </label>
                </div>
                <div class="flex fd-rowReverse">
                    <button type="submit" @click="postMessage">发送</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "textEdit",
        data() {
            return  {
                emoji: false,
                emojiList: [
                    'smile', 'angry', 'dizzy', 'flushed', 'frown',
                    'frown-open', 'grimace', 'grin', 'grin-alt', 'grin-beam',
                    'grin-hearts', 'grin-beam-sweat', 'grin-squint', 'grin-squint-tears', 'grin-stars',
                    'grin-tears', 'grin-tongue', 'grin-tongue-squint', 'grin-wink', 'grin-tongue-wink',
                    'kiss', 'kiss-beam', 'kiss-wink-heart', 'laugh', 'laugh-beam',
                    'laugh-squint', 'laugh-wink', 'meh', 'meh-blank', 'meh-rolling-eyes',
                    'sad-cry', 'sad-tear', 'smile-beam', 'smile-wink', 'surprise',
                    'tired', 'hand-lizard', 'hand-peace', 'hand-point-down', 'hand-point-left',
                    'hand-point-right', 'hand-point-up', 'hand-rock', 'hand-scissors', 'hand-paper',
                    'handshake', 'heart',
                ],

                text: '',
                enterAndPost: false,
            }
        },
        computed: {
            chatData() {
                return this.$store.state.chatData;
            },
            chatTarget() {
                return this.$store.state.chatTarget;
            },
        },
        methods: {
            resetEdit() {
                this.text = '';
                this.enterAndPost = false;
            },

            addEmoji(e) {
                if (e.target.nodeName === 'I') {
                    this.text += `[${e.target.title}]`;
                    this.$refs.textInput.focus();
                }
            },

            checkKeyPost(e) {
                if (e.key === 'Enter' && e.ctrlKey) {
                    this.text += '\n';
                } else if (!this.enterAndPost && e.key === 'Enter') {
                    e.preventDefault();
                    if (!this.enterAndPost) {
                        this.postMessage();
                    }
                    this.enterAndPost = true;
                }
            },

            async imgPost(e) {
                let file = e.target.files[0];
                e.target.value = '';
                let formData = new FormData();
                formData.set('img', file);
                let { data } = await this.$http.post('/chat/postImg', formData);
                let url = [process.env.VUE_APP_SOCKET_URL || '/', data].join('');

                if (file.type.split('/').shift() === 'image') {
                    let pre = `<img src="${url}" alt="${data.slice(13)}"/>`
                    this.$socket.emit('postMessage', {
                        text: '[图片]',
                        preText: pre,
                        textType: 'img',
                        targetID: this.chatTarget._id,
                        messageID: this.chatData.mID,
                    });
                } else {
                    let pre = `<video src="${url}"  controls="controls"/>`
                    this.$socket.emit('postMessage', {
                        text: '[视频]',
                        preText: pre,
                        textType: 'video',
                        targetID: this.chatTarget._id,
                        messageID: this.chatData.mID,
                    });
                }
            },

            async filePost(e) {
                let file = e.target.files[0];
                e.target.value = '';
                let formData = new FormData();
                formData.set('file', file);
                let { data } = await this.$http.post('/chat/fileUpload', formData);
                let url = [process.env.VUE_APP_SOCKET_URL || '/', data.url].join('');
                let pre = `
                    <div class="file">
                        <i class="iconfont icon-file"></i>
                        <p>${data.filename}</p>
                        <div class="download" data-url="${url}"></div>
                    </div>`
                this.$socket.emit('postMessage', {
                    text: '[文件]',
                    preText: pre,
                    textType: 'file',
                    targetID: this.chatTarget._id,
                    messageID: this.chatData.mID,
                });
            },

            postMessage() {
                if (this.text === '') {
                    return
                }

                let pre = this.text;

                let candidates = new Set();
                let key = '';
                for (let char of pre) {
                    switch (char) {
                        case '[' : key.length > 0 ? key = '' : key += char; break
                        case ']' : {
                            candidates.add(key.slice(1));
                            key = '';
                            break
                        }
                        default: key.length > 0 ? key += char : null;
                    }
                }
                for (let key of candidates) {
                    if (this.emojiList.indexOf(key) !== -1) {
                        pre = pre.replaceAll(
                            `[${key}]`,
                            `<i class="iconfont icon-${key}" title="${key}"></i>`);
                    }
                }

                pre = pre.replaceAll('\n', '<br/>');

                this.$socket.emit('postMessage', {
                    text: this.text,
                    preText: pre,
                    textType: 'text',
                    targetID: this.chatTarget._id,
                    messageID: this.chatData.mID,
                });
            },
        },
        mounted() {
            let that = this;
            window.addEventListener('click', function () {
                that.emoji = false;
            })
        }
    }
</script>

<style scoped lang="scss">
    .bar {
        .iconfont {
            cursor: pointer;
            font-size: 20px;
            color: rgb(104 110 121);
        }

        .iconfont:hover {
            color: #ff8736;
        }

        .emoji {
            box-sizing: border-box;
            padding: 10px 10px;
            width: 300px;
            height: 220px;
            position: absolute;
            bottom: 35px;
            left: -14px;
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.2);
            flex-wrap: wrap;
            align-content: start;
            z-index: 1;

            div {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 30px;
                padding: 2px 2px;

                .iconfont {
                    padding: 2px 2px;
                    border: 1px solid transparent;
                }

                .iconfont:hover {
                    color: rgb(104 110 121);
                    border-color: rgb(104 110 121);
                }
            }

            div::after {
                content: '';
                display: block;
                position: absolute;
                bottom: -20px;
                left: 12px;
                border: 10px solid transparent;
                border-top-color: white;
            }
        }

        .file:hover {
            .iconfont {
                color: #ff8736;
            }
        }

        .fileUpload {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            opacity: 0;
            font-size: 0;
            cursor: pointer;
        }
    }

    .sendBox {
        textarea {
            width: 100%;
            height: 100%;
            outline: none;
            background-color: transparent;
            border: 0;
            font-size: 14px;
            resize: none;
        }

        button {
            padding: 5px 10px;
            cursor: pointer;
            color: grey;
            border: 1px solid grey;
            border-radius: 5px;
            background-color: transparent;
        }

        button:active {
            background-color: #ddd;
        }
    }
</style>